<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
  </div>
  <hr>
  <ul>
    <li v-for="game in games" :key="game.id">{{ game.name }}</li>
  </ul>
  <button @click="changeFirstGame">修改第一个游戏名字</button>
</template>

<script setup>
import { reactive } from 'vue';
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 1, name: '王者荣耀' },
  { id: 2, name: '原神' },
  { id: 3, name: '三国志' },
])


console.log(car);
console.log(Proxy);


function changePrice() {
  car.price += 10
}

function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}

</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>